import React,{ useState } from 'react';
import {
  Row,
  Col,
  Form,
  Input,
  Cascader,
  DatePicker,
  Upload,
  Space,
  Button
} from 'antd'

import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons';
const { RangePicker } = DatePicker
const { TextArea } = Input

export default function FormShow({changeForm, regionLists, loadData}) {
  const [length, setLength] = useState()
  const [len, setLen] = useState()


  /** 图片 */
  const changeHanler = ({fileList}) => {
    setLength(fileList.length)
  }
  const changeHanler1 = ({fileList}) => {
    setLen(fileList.length)
  }

  const normFile = (e) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };
  return (
    <>
      <Form
          form={changeForm}
          layout="vertical"
          style={{
          padding: '0 40px',
        }}
      >

        <Row gutter={16}>
            {/* 活动名称 */}
          <Col span={12}>
            <Form.Item
                label="活动名称"
                name="activityName"
                rules={[
                {
                  required: true,
                  message: '请输入活动名称!',
                },
              ]}
            >
              <Input
                  placeholder="请输入活动名称"
                  style={{
                  width: '70%',
                }}
              />
            </Form.Item>
          </Col>

          {/** 活动地区 */}
          <Col span={12}>
            <Form.Item
                label="地区选择"
                name="Province"
                rules={[
                {
                  required: true,
                  message: '请选择活动所属地区',
                },
              ]}
            >
              <Cascader changeOnSelect
                  fieldNames={{label: 'addressName', value: 'addressCode'}}
                  loadData={loadData}
                  options={regionLists}
                  style={{
                    width: '70%',
                  }}
              />
            </Form.Item>
          </Col>
        </Row>

        {/* 活动时间 */}
        <Form.Item
            label="活动时间"
            name="activityTime"
            rules={[
                {
                  required: true,
                  message: '请选择活动时间!',
                },
              ]}
        >
              <RangePicker
                  showTime
                  style={{ width: '50%' }}
              />
       </Form.Item>
       <Row gutter={16}>
          <Col span={12}>
            <Form.Item
                label="&nbsp;&nbsp;活动地点"
                name="activitySite"
            >
              <Input
                  placeholder="请输入活动地点"
                  style={{
                  width: '70%',
                }}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
                label="&nbsp;&nbsp;活动主办方"
                name="activityOrganizers"
            >
              <Input
                  placeholder="请输入活动主办方"
                  style={{
                  width: '70%',
                }}
              />
            </Form.Item>
          </Col>
        </Row>
        <Form.Item
            label="&nbsp;&nbsp;活动内容"
            name="activityContent"
        >
               <TextArea
                   autoSize={{ minRows: 3, maxRows: 5 }}
                   placeholder="请输入活动内容"
                   style={{ width: '60%' }}
               />
       </Form.Item>
       <Row gutter={16}>
          <Col span={12}>
            <Form.Item
                getValueFromEvent={normFile}
                label="活动图"
                name="pictureUrl"
                rules={[
                {
                  required: true,
                  message: '请选择活动图',
                },
              ]}
                valuePropName="fileList"
            >
               <Upload
                   action="/campus/campusweb/upload/pictureUpload"
                   listType="picture-card"
                   name="multipartFile"
                   onChange={changeHanler}
               >
                  {length >=1 ? '' : '+ Upload'}
                </Upload>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
                getValueFromEvent={normFile}
                label="缩略图"
                name="thumbnailPictureUrl"
                rules={[
                  {
                    required: true,
                    message: '请选择缩略图',
                  },
                ]}
                valuePropName="fileList"
            >
                <Upload
                    action="/campus/campusweb/upload/pictureUpload"
                    listType="picture-card"
                    name="multipartFile"
                    onChange={changeHanler1}
                >
                  {len >= 1 ? '' : '+ Upload'}
                </Upload>
            </Form.Item>
          </Col>
        </Row>
        <Form.Item label="添加日程">
            <Form.List name="scheduleVOS"
                rules={[
                {
                  required: true,
                  message: '请选择活动时间!',
                },
              ]}
            >
            {(fields, { add, remove }) => (
              <>
                {fields.map(({ key, name, ...restField }) => (
                  <Space align="baseline"
                      key={key}
                      style={{ display: 'flex', marginBottom: 8, width: '100%' }}
                  >
                    <Form.Item
                        {...restField}
                        name={[name,"scheduleName"]}
                        rules={[{ required: true, message: '请输入日程名称' }]}
                    >
                      <Input placeholder="请输入日程名称"  />
                    </Form.Item>
                    <Form.Item
                        {...restField}
                        name={[name,"scheduleDate"]}
                    >
                      <DatePicker
                          showTime
                      />
                    </Form.Item>
                    <MinusCircleOutlined onClick={() => remove(name)} />
                  </Space>
                ))}
                <Form.Item style={{width: '50%'}}>
                  <Button block
                      icon={<PlusOutlined />}
                      onClick={() => add()}
                      type="dashed"
                  >
                    Add field
                  </Button>
                </Form.Item>
              </>
            )}
            </Form.List>
        </Form.Item>
      </Form>
    </>
  );
}
